<template>
  <div class="download">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="20">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.download.name") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <main class="main">
      <NuxtImg src="/img/world.png" alt="" srcset="" />
      <Swiper ref="refswiper" :modules="[SwiperAutoplay]" :slides-per-view="1" :loop="true" :effect="'creative'"
        :autoplay="{
        delay: 8000,
        disableOnInteraction: true,
      }">
        <SwiperSlide v-for="(item, index) in imglist " :key="index">
          <AppSkeleton :loading="loadings">
            <template #ske>
              <el-skeleton-item variant="image" style="width: 100%; height: 300px" />
            </template>
            <template #main> <NuxtImg class="swiperimg" :src="item" /></template>
          </AppSkeleton>
        </SwiperSlide>
      </Swiper>
      <el-button @click="installs" :disabled="btnloading" type="success">Download APP</el-button>
      <div class="icon" @click="showBottom = true">
        <el-icon color="#0a906c" name="arrow-double-left">
          <DArrowLeft />
        </el-icon>
        <span>Click to view installation</span>
      </div>
      <!-- 底部弹出 -->
      <div class="overly" v-if="showBottom" @click="showBottom = false">
        <div class="popup">
          <h3>Installation Tutorial</h3>
          <NuxtImg src="/img/download5.png" alt="" />
        </div>
      </div>

    </main>
  </div>
</template>
<script setup lang="ts">
import { DArrowLeft, ArrowLeftBold } from '@element-plus/icons-vue'
// import { Controller, Autoplay, Navigation, Pagination, } from 'swiper/modules';
import { ref, nextTick,shallowRef,shallowReactive, onMounted, reactive } from "vue";
let loadings = shallowRef(true);
let btnloading =shallowRef(false);
let showBottom =shallowRef(false);
let installs = () => {
  btnloading.value = true
  let fileLink = document.createElement('a');
  fileLink.href = 'https://cdn.ouro777.com/hot/download/slots_ouro_pro.apk';
  fileLink.style.display = "none"
  fileLink.setAttribute('download', "apk");
  document.body.appendChild(fileLink);
  fileLink.click();
  fileLink.remove()
  btnloading.value = false

}
// swiper
// const onSwiper = (swiper) => {
//   console.log(swiper);
// };
// const onSlideChange = () => {
//   console.log('slide change');
// };
onMounted(() => {
  nextTick(() => {
    // loadings.value = false;
    let time = setInterval(() => {
      loadings.value = false;
      clearInterval(time);
    }, 500);
  });
});
let imglist = shallowReactive<string[]>([
  "/img/download1.png",
  "/img/download2.png",
  "/img/download3.png",
  "/img/download4.png",
]);

</script>
<style scoped lang="scss">
.download {
  width: 100%;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      @include flex(row, space-between, center);
      display: block;
      cursor: pointer;

      img {
        width: 28px;
      }
    }
  }

  .main {
    padding: 45px 10px 90px;
    width: 100%;
    min-height: 100vh;
    @include flex(column, start, center);
    background-color: rgb(15, 15, 15);

    .head {
      padding-top: 10px;
      height: 44px;
      @include flex(row, flex-start, center);

      img {
        width: 36px;
        border-radius: 18px;
        margin-right: 10px;
      }

      div {
        margin-right: 16px;
        @include flex(column, center, flex-start);

        span {
          font-size: 16px;
          color: #999;
        }

        strong {
          font-size: 16px;
          color: #fff;
        }
      }

      .icon {
        @include flex(row, flex-start, flex-end);
        height: 100%;
        margin-bottom: -5px;

        .elicon {
          transition: all 1s;
          transform-origin: center;
        }

        .rotate {
          animation: rotate 2s cubic-bezier(0.5, 0, 0.5, 1) 1;
        }

        /* 定义一个名为rotate的动画 */
        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(-360deg);
          }
        }
      }
    }

    .overly {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 20;

      .popup {
        width: 100vw;
        padding-bottom: 60px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 65%;
        overflow: auto;

        border-top-left-radius: 20px;
        border-top-right-radius: 20px;

        &::-webkit-scrollbar {
          display: none;
        }

        h3 {
          padding: 30px 0 20px;
        }

        @include flex(column, flex-start, center);

        img {
          width: 96%;
        }
      }
    }


    >img {
      margin: 20px auto;
      height: 40px;
    }

    .swiper {
      width: 60%;

      .swiperimg {
        width: 100%;
      }
    }



    :deep(.el-button) {
      height: 52px;
      width: 100%;
      background: #0a906c;
      color: #fff;
      border-radius: 12px;
      font-size: 16px;
      border: 0;
      margin: 20px 0;
    }

    .icon {
      width: 100%;
      @include flex(row, center, center);

      :deep(.el-icon) {
        transform: rotate(90deg);
        margin-right: 20px;
      }

      span {
        color: #0a906c;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
</style>
